<template>
  <div>
    <a-button icon="plus" size="small" @click="handleAddFk()" v-if="fkList.length == 0"></a-button>
    <a-row v-for="fk in fkList" :key="'' + Math.random()">
      <a-col :span="24">
        <!--<a-select style="width:120px;" v-model="fk.from" @change="handleChange">
        </a-select>-->
        <a-tree-select
          style="width:120px;"
          v-model="fk.from"
          :treeData="colTree[subTable]"
          :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
          treeDefaultExpandAll
          @change="handleChange"
        >
        </a-tree-select>
        &nbsp;
        <a-select style="width:210px;" v-model="fk.type" @change="handleChange">
          <a-select-option value="parentField">{{ $t('m.eform.apptable.other.parentField') }}</a-select-option>
          <!--<a-select-option value="fixedValue">固定值</a-select-option>-->
          <a-select-option value="childField">{{ $t('m.eform.apptable.other.childField') }}</a-select-option>
        </a-select>
        &nbsp;
        <a-input v-if="fk.type == 'fixedValue'" style="width:120px;" v-model="fk.value"
                 @change="handleChange"></a-input>
        <!--<a-select v-else style="width:120px;" v-model="fk.value" @change="handleChange">
        </a-select>-->
        <a-tree-select
          v-else
          style="width:120px;"
          v-model="fk.value"
          :treeData="colTree[mainTable]"
          :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
          treeDefaultExpandAll
          @change="handleChange"
        >
        </a-tree-select>
        &nbsp;
        <a-button icon="delete" size="small" @click="handleDelFk(fk)"></a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>

  export default {
    name: "FkEdit",
    props: {
      fkList: {
        type: Array,
        default: () => []
      },
      colTree: {
        type: Object,
        default: () => {
        }
      },
      mainTable: {
        type: String,
        default: ''
      },
      subTable: {
        type: String,
        default: ''
      }
    },
    data() {
      return {}
    },
    methods: {
      handleChange() {
        this.$emit("change");
      },
      handleAddFk() {
        this.fkList.push({
          from: 'id',
          type: 'parentField',
          value: 'id'
        });
        this.handleChange();
      },
      handleDelFk(fk) {
        this.fkList.splice(this.fkList.indexOf(fk), 1);
        this.handleChange();
      },
    },
    created() {
      //console.log(this.fkList);
      //console.log(this.colTree);
      //console.log(this.mainTable);
      //console.log(this.subTable);
    }
  }
</script>